<template>
	<view class="count">
		<view class="bgTop">
			<image src="/static/my/bg.png" class="bgImg" mode=""></image>
		</view>
		<view class="body p-20">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
				<!-- 上面的tabs -->
				<view class="tabs f f-a-c ">
					<view class="num act" @click="numOne" :class="{active:ind==0}">
						借阅数量
					</view>
					<view class="num" @click="numTow" :class="{active:ind==1}">
						读书会时长
					</view>
				</view>
				<view v-for="(item,index) in list" :key="index" class="itemList f f-a-c f-j-b m-t-20">
					<view class="left f f-a-c">
						<image src="/static/my/one.png" v-if="index==0" class="img m-r-20" mode=""></image>
						<image src="/static/my/tow.png" v-else-if="index==1" class="img m-r-20" mode=""></image>
						<image src="/static/my/tree.png" v-else-if="index==2" class="img m-r-20" mode=""></image>
						<view v-else class="num m-r-20">{{item.rank}}</view>
						<image :src="item.avatar" class="avare m-r-20" mode=""></image>
						<view class="title">
							<view class="nickname">
								{{item.nickname || item.realname}}
							</view>
							<view class="time m-t-10">
								读书会时长：{{timeFn(item.book_club_duration)}}
							</view>
						</view>
					</view>
					<view class="book">
						{{item.borrow_num}}本
					</view>
				</view>
			</scroll-view>
			<!-- 下面的我的信息 -->
			<view class="bot f f-a-c f-j-b">
				<view class="left f f-a-c">
					<image src="/static/my/one.png" v-if="myObj.rank==1" class="img m-r-20" mode=""></image>
					<image src="/static/my/tow.png" v-else-if="myObj.rank==2" class="img m-r-20" mode=""></image>
					<image src="/static/my/tree.png" v-else-if="myObj.rank==3" class="img m-r-20" mode=""></image>
					<view v-else class="num m-r-20">{{myObj.rank}}</view>
					<image :src="myObj.avatar" class="avare m-r-20" mode=""></image>
					<view class="title">
						<view class="nickname">
							{{myObj.nickname || myObj.realname}} (本人)
						</view>
						<view class="time m-t-10">
							读书会时长：{{timeFn(myObj.book_club_duration)}}
						</view>
					</view>
				</view>
				<view class="book">
					{{myObj.borrow_num}}本
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ind: 0,
				num: 5,
				myObj: {},
				list: [],
			}
		},
		onShow() {
			this.initList()
		},
		watch: {
			ind(newVal, oldVal) {
				this.initList()
			}
		},
		methods: {
			padZero(number) {
				return number < 10 ? "0" + number : number;
			},
			// 时间
			timeFn(seconds) {
				// let seconds = 80
				var hours = Math.floor(seconds / 3600); // 将秒数转换为小时数
				var minutes = Math.floor((seconds % 3600) / 60); // 将剩余的秒数转换为分钟数
				var remainingSeconds = seconds % 60; // 获取剩余的秒数
				var paddedHours = hours;
				var paddedMinutes = minutes;
				var paddedSeconds = remainingSeconds;
				// 返回分钟和秒数的对象
				if (paddedHours != 0) {
					return paddedHours + 'h' + paddedMinutes + 'min'
				} else if (paddedMinutes != 0) {
					return paddedMinutes + 'h'
				}
				return paddedSeconds + 's'
			},
			// 这个是列表
			async initList() {
				let n = await this.$api.Rankings({
					book_club: this.ind == 0 ? 'borrow' : 'book_club'
				})
				this.myObj = n.data.rank
				this.list = n.data.rankings
			},
			// 这个是滑到下面
			onreachBottom() {
				console.log('123456');
			},
			// 点击第一个
			numOne() {
				this.ind = 0
			},
			numTow() {
				this.ind = 1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bot {
		position: absolute;
		height: 190rpx;
		bottom: 0;
		width: 100%;
		left: 0;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 20rpx 40rpx !important;
	}

	.itemList,
	.bot {
		background-color: #fff;
		border-radius: 15rpx;
		width: 100%;
		padding: 20rpx;

		.book {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: right;
			color: #009d85;
		}

		.avare {
			width: 76rpx;
			height: 76rpx;
			border-radius: 38rpx;
		}

		.nickname {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #434645;
		}

		.time {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #999999;
		}

		.img {
			width: 38rpx;
			height: 46rpx;
		}

		.num {
			width: 38rpx;
			font-size: 34rpx;
			font-family: DIN, DIN-Regular;
			font-weight: 700;
			text-align: center;
			color: #999999;
		}
	}

	.tabs {
		width: 90%;
		height: 74rpx;
		background: #f5f5f5;
		border-radius: 36rpx;
		margin: 0 auto;
		padding: 8rpx;

		.num {
			width: 50%;
			height: 62rpx;
			line-height: 60rpx;
			background: #f5f5f5;
			border-radius: 32rpx;
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #999999;
		}

		.active {
			background-color: #fff;
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #009d85;
		}

		.act {
			margin-right: 10rpx;
		}
	}

	.bgTop {
		position: relative;
		z-index: -1;
		height: 500rpx;
		width: 100%;

		.bgImg {
			width: 100%;
			height: 100%;
		}
	}

	.body {
		position: relative;
		height: calc(100vh - 372rpx);
		width: 100%;
		background-color: #f6f8f7;
		// background-color: pink;
		margin-top: -130rpx;
		border-radius: 40rpx 40rpx 0 0;
		padding-bottom: 190rpx;
	}

	.count {
		height: 100vh;
		width: 100%;
	}
</style>